/**
 * Created by MingIr on 2017/1/20.
 * @author:bjzhang
 */

import React,{ Component } from 'react';
import {
    View,
    StyleSheet,
    Text,
    ListView,
} from 'react-native';

import PHead from '../module/header';
import renderIf from '../module/renderIf';
import PFooter from '../module/footer';
import NewChest from  '../chest/new-chest';

export default class MineConversations extends Component{
    constructor(props){
        super(props);
        let ds = new ListView.DataSource({ rowHasChanged:(r1,r2)=> r1 !== r2 });
        this.state = {
            dataSource:ds.cloneWithRows(this._genRows({})),
            viewNew:false,
        }
    }
    newChest(){
        // alert('New Chest');
        this.setState({viewNew:true});
    }
    CloseNew(){
        this.setState({viewNew:false});
    }
    render(){
        return(
            <View style={{flex:1}}>
                <View style={styles.container}>
                    <PHead title='我说这是个好消息，你偏偏不肯信'/>
                    <ListView dataSource={this.state.dataSource}
                              renderRow={this._renderRow}
                              renderHeader={this._renderHeader}
                              style={styles.table}/>
                    <PFooter onMine={ ()=> this.props.navigation.navigate('MineChests') }
                             onFindChest={ ()=> this.props.navigation.navigate('Chest') }
                             onNewChest={this.newChest.bind(this)} />
                </View>
                {renderIf(this.state.viewNew)(
                    <View style={[styles.blurView,styles.container,{backgroundColor:'rgba(0,0,0,.5)'}]}>
                        <NewChest onNavigation={this.props.navigation} onClosed={this.CloseNew.bind(this)}/>
                    </View>
                )}
            </View>
        );
    }
    _renderHeader(){
        return(
            <View style={styles.blank}></View>
        );
    }
    _renderRow(rowData:{nickName:string,time:string,desc:string}){
        return(
            <View style={styles.row}>
                <View style={styles.nickRow}>
                    <Text style={styles.nickNameTx}>{rowData.nickName}</Text>
                    <Text style={styles.timeTx}>{rowData.time}</Text>
                </View>
                <View style={styles.introWrap}>
                    <Text style={styles.introTx}>{rowData.desc}</Text>
                </View>
            </View>
        );
    }

    _genRows(pressData:{[key:number]:boolean}) : Array<string>{
        var dataBlob = [];
        dataBlob.push({nickName:'LULU',time:'2016.12.26 08:30',desc:'欢迎你，我是LuLu~'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        dataBlob.push({nickName:'LULU',time:'2017.12.26 08:30',desc:'我们最近有一个很有意思的活动～'});
        return dataBlob;
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:'column',
        backgroundColor:'#f8f8f8',
        justifyContent:'flex-start',
    },
    blurView: {
        position: "absolute",
        left: 0,
        top: 0,
        bottom: 0,
        right: 0
    },
    nickRow:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
    },
    table:{
        paddingLeft:15,
        paddingRight:15,
    },
    blank:{
        height:10,
    },
    row:{
        marginBottom:10,
        paddingLeft:20,
        paddingRight:15,
        paddingBottom:15,
        paddingTop:12,
        borderRadius:3,
        backgroundColor:'#fff'
    },
    nickNameTx:{
        color:'#43CBFE',
        fontSize:14,
    },
    timeTx:{
        color:'#8C959F',
        fontSize:12,
    },
    introTx:{
        color:'#5F6484',
        fontSize:15,
    },
    introWrap:{
        marginTop:15,
    },
});